import { keyframes } from '@emotion/react';
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';

import { Box, Stack } from '@mui/material';

import { IAction } from 'state/action';
import { INestedMessage, highlightMessage, msgState } from 'state/chat';
import { IMessageElement } from 'state/element';
import { settingsState } from 'state/settings';

import Author, { authorBoxWidth } from './authorDeepexi';
import Buttons from './buttons';
import MessageContent from './content';
import DetailsButton from './detailsButton';
import Messages from './messages';
import UploadButton from './uploadButton';

interface Props {
  message: INestedMessage;
  elements: IMessageElement[];
  actions: IAction[];
  indent: number;
  showAvatar?: boolean;
  showBorder?: boolean;
  isRunning?: boolean;
  isLast?: boolean;
}

// Uses yellow[500] with 50% opacity
const flash = keyframes`
  from {
    background-color: transparent;
  }
  25% {
    background-color: rgba(255, 173, 51, 0.5);
  }
  to {
    background-color: transparent;
  }
`;

const Message = ({
  message,
  elements,
  actions,  
  indent,
  showAvatar,
  showBorder,
  isRunning,
  isLast
}: Props) => {
  const appSettings = useRecoilValue(settingsState);
  const msgId = useRecoilValue(msgState);
  const highlightedMessage = useRecoilValue(highlightMessage);
  const [showDetails, setShowDetails] = useState(appSettings.expandAll);

  useEffect(() => {
    setShowDetails(appSettings.expandAll);
  }, [appSettings.expandAll]);

  if (appSettings.hideCot && indent) {
    return null;
  }

  return (
    <Box
      sx={{
        color: 'text.primary',
        backgroundColor: 'transparent'
      }}
      className="message"
    >
      <Box
        sx={{
          boxSizing: 'border-box',
          mx: 'auto',
          maxWidth: '60rem',
          display: 'flex',
          flexDirection: 'column',
          position: 'relative'
        }}
      >
        <Stack
          id={message.id ? `message-${message.id}`:'0'}
          direction="row"
          ml={!message.id ? `${(authorBoxWidth + 16)}px` : indent ? `${indent * (authorBoxWidth + 16)}px` : 0}
          sx={{
            py: 2,
            borderBottom: (theme) =>
              showBorder ? `1px solid ${theme.palette.divider}` : 'none',
            animation:message.id ?
              (message.id && highlightedMessage === message.id
                ? `3s ease-in-out 0.1s ${flash}`
                : 'none') : 'none'
          }}
        >
          <Author message={message} show={showAvatar}>
            <Stack flexGrow={1} spacing={1}>
              {
                  msgId == "SPEECH_ISR_WAKEUP_NTF"
                  ?
                  <div><img src="/src/assets/loading.gif" alt="" style={{width:"15px",height:'15px'}}/></div>
                  :msgId == "SPEECH_ISR_ONLY_RESULT_NTF" ? <p style={{fontSize: '1.485em',whiteSpace: 'pre-wrap'}}>语音识别中...</p>
                  :msgId == "SPEECH_ISR_ONLY_RESULT_NTF" ?
                  <MessageContent
                  authorIsUser={message.authorIsUser}
                  elements={elements}
                  id={message.id}
                  content={message.content}
                  language={message.language}
                />
                : <></>
              }
              <DetailsButton
                message={message}
                opened={showDetails}
                onClick={() => setShowDetails(!showDetails)}
                loading={isRunning}
              />
              {!isRunning && isLast && message.waitForAnswer && (
                <UploadButton />
              )}
              <Buttons message={message} actions={actions} />
            </Stack>
          </Author>
        </Stack>
      </Box>
      {message.subMessages && showDetails && (
        <Messages
          messages={message.subMessages}
          actions={actions}
          elements={elements}
          indent={indent + 1}
          isRunning={isRunning}
        />
      )}
    </Box>
  );
};

export default Message;
